<?xml version="1.0" encoding="UTF-8"?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
   xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
   xmlns:f="http://xmlns.jcp.org/jsf/core"
   xmlns:h="http://xmlns.jcp.org/jsf/html"
   xmlns:p="http://primefaces.org/ui"
   xmlns:c="http://xmlns.jcp.org/jsp/jstl/core"
   template="/WEB-INF/templates/default.xhtml">
   
   	<f:metadata>
	   	<f:viewParam name="recordId" value="#{assessRecordHome.id}"></f:viewParam>
	   	<f:event listener="#{assessRecordHome.initConversation()}" type="preRenderView"></f:event>
	   	<f:event listener="#{dictList.setMaxResults(1000)}" type="preRenderView"></f:event>
	   	<f:viewParam name="taskId" value="#{bpmHome.taskId}"></f:viewParam>
   	</f:metadata>
   	
    <ui:define name="head">
   		<script >
			$(function(){
				$(".ui-autocomplete").find("input").addClass('input-large');
			});
   		</script>
   		<style type="text/css">
   			.closeBtn {
				float: right;
				background: url(#{resource['images/close2.png']}) 0 0 no-repeat;
				height: 22px;
				width: 22px;
				margin: 5px 12px 0 0;
			}
			.closeBtn:hover {
				background: url(#{resource['images/close2_hover.png']}) 0 0 no-repeat;
			}
   		</style>
    </ui:define>
   	<ui:define name="content">
		<h:form id="editForm">         
			<p:panel id="panel" header="#{assessRecordHome.managed ? '修改' : '新增' }" style="margin-bottom:10px;">
		       	<p:messages id="messages" closable="true"><p:autoUpdate/></p:messages>
		        
		        <h:panelGrid columns="2" cellpadding="5">
		        	<p:outputLabel value="驳回原因"  rendered="#{not empty bpmHome.task.processVariables.approvalDesc}"/>
		        	<h:outputText value="#{bpmHome.task.processVariables.approvalDesc}"  rendered="#{not empty bpmHome.task.processVariables.approvalDesc}"/>
		        
					<p:outputLabel for="supplier" value="选择中介机构" />
					<p:autoComplete id="supplier"  value="#{assessRecordHome.instance.serviceSupplier}" completeMethod="#{serviceSupplierService.fliterSupplierByCnname}" 
			                        var="_supplier" itemLabel="#{_supplier.cnname}" itemValue="#{_supplier}" required="true" converter="entityConverter" forceSelection="true"
			                        placeholder="请输入中介名称" styleClass="input-large">		            
			            <p:column>
			                <h:outputText value="#{_supplier.cnname}" styleClass="input-large"/>
			            </p:column>
			        </p:autoComplete>
			        
			        <p:outputLabel for="dict" value="所属评价事项：" />				
					<p:selectOneMenu id="dict" value="#{assessRecordHome.instance.dict}" required="true" style="width: 300px; !important" panelStyle="width: 800px;">
						<f:selectItem itemLabel="-请选择-" itemValue="#{null}"/>
						<f:selectItems value="#{dictList.resultList}" var="_dic" itemLabel="#{_dic.title}" itemValue="#{_dic}"></f:selectItems>
						<f:converter converterId="entityConverter"></f:converter>
						<f:validator binding="#{uniqueAssessRecordOfPeriodValidator}"></f:validator>
						<p:ajax event="change" listener="#{assessRecordHome.dictChange()}" update="editForm:scoreLabelPanel,editForm:scoreValPanel" />
						
						<p:column style="width:100%">
			                <h:outputText value="#{_dic.title}" />
			            </p:column>
					</p:selectOneMenu>
					
					<p:outputPanel id="scoreLabelPanel">
						<p:tooltip for="output" value="当评价事项设定的最大值和最小值相同时，系统将自动设定此分值！"></p:tooltip>
						<p:outputLabel for="score" value="分值(#{assessRecordHome.instance.dict.calcMethod.typeName})：" />	
					</p:outputPanel>
					<p:outputPanel id="scoreValPanel">
						<h:outputText id="output" value="当前所选分值为：#{assessRecordHome.instance.score}分" />
						<h:inputHidden  id="score" required="true" value="#{assessRecordHome.instance.score}" />
						<p:slider for="score" 
							display="output"
							id="scoreSlider"
        					displayTemplate="当前所选分值为： {value}分" 
        				 	minValue="#{assessRecordHome.instance.dict.minScore}" 
							maxValue="#{assessRecordHome.instance.dict.maxScore}"
        				 	step="1" 
        				 	style="width: 400px;margin-top:10px"
        				 />
					</p:outputPanel>	
					<p:outputLabel for="assessResult" value="评价结果：" />
					<p:inputTextarea id="assessResult" rows="5" styleClass="input-large" required="true" value="#{assessRecordHome.instance.assessResult}"></p:inputTextarea>
					
					<p:outputLabel for="imageUpload" value="图片材料" />			
					<p:outputPanel>
						<p:fileUpload
							id="imageUpload"
							mode="advanced"
							skinSimple="true"
							allowTypes="/(\.|\/)(jpe?g|png)$/"
							fileLimitMessage="只能上传一个附件"
							sizeLimit="#{1024 * 1024 * 5}"
							uploadLabel="上传"
							cancelLabel="取消"
							update="editForm:imagePanel"
							fileUploadListener="#{assessRecordHome.uploadImage}"
						></p:fileUpload>
						<p:panel style="min-height:100px"
							id="imagePanel" widgetVar="imagePanel">
							<div id="imgsPreview"  style="display:inline-block">
								<p:repeat var="_image" value="#{assessRecordHome.instance.images}" varStatus="_status">
									<img  data-original="#{attachmentUtils.getFullPath(_image)}" src="#{attachmentUtils.getFullPath(_image)}"  width="240"/>
								</p:repeat>
							</div>
						</p:panel>
					</p:outputPanel>	
					
					<p:outputLabel for="attachments" value="附件材料" />		
					<p:outputPanel id="attachments">
						<p:fileUpload
							id="attachmentUploadFile"
							label="选择"
							mode="advanced"
							multiple="true"
							skinSimple="true"
							sizeLimit="#{1024 * 1024 * 3}"
							uploadLabel="上传"
							cancelLabel="取消"
							update="editForm:uploadedAttachments"
							fileUploadListener="#{assessRecordHome.uploadAttachments}"
						/>
						<p:panel id="uploadedAttachments">
							<ul>
								<p:repeat var="_attr" value="#{assessRecordHome.instance.attachments}" varStatus="_status">
									<li>
										<p:link value="#{_status.index + 1}、#{_attr.filename}" target="_blank" ajax="false" href="#{attachmentUtils.getFullPath(_attr)}" />、											
										<span>
											<p:commandLink styleClass="closeBtn" action="#{assessRecordHome.removeAttachment(_status.index)}" update="editForm:uploadedAttachments" immediate="true"  ></p:commandLink>															
										</span>
									</li>
								</p:repeat>
							</ul>
						</p:panel>
					</p:outputPanel>			
				</h:panelGrid>
			</p:panel>
			
			<p:commandButton action="#{assessRecordHome.backendSaveAndFlush()}" value="保存" ajax="false" />
			<p:commandButton value="删除" action="#{assessRecordHome.delete()}" rendered="false">
				<p:confirm header="请确认" message="您确认删除记录吗?" icon="ui-icon-alert" />
			</p:commandButton>
			<p:button outcome="AssessRecordList.xhtml" value="取消" ></p:button>
			
			<p:confirmDialog id="confirmDialog" global="true" showEffect="fade" hideEffect="explode" widgetVar="confirmDialog">
			    <p:commandButton value="确认" styleClass="ui-confirmdialog-yes"></p:commandButton>
			    <p:commandButton value="取消" immediate="true" styleClass="ui-confirmdialog-no" />
			</p:confirmDialog>
		</h:form>
      
   	</ui:define>
</ui:composition>
